<template>
	<view class="container">
		<!-- 状态选项卡 -->
		<!-- <u-tabs 
      :list="tabList" 
      :current="currentTab" 
      @change="switchTab"
      active-color="#2979ff"
      bar-width="60"
    ></u-tabs> -->
		<u-subsection :list="tabList" v-model="current" @change="switchTab" mode="button" active-color="#ffffff"
			button-color="#2979ff" bg-color="#ffffff"></u-subsection>
		<!-- 订单列表 -->
		<scroll-view scroll-y class="order-list">
			<!-- 空状态 -->
			<u-empty v-if="orders.length === 0" mode="order" icon="/static/empty-order.png"
				text="暂无相关订单"></u-empty>

			<!-- 订单卡片 -->
			<view v-for="(order, index) in orders" :key="index" class="order-card" @click="tiaozhuan(order.PcRegNo,order.PcTestName,order.PcCreateDatetime,order.PcAmount,order.PcAllPrice,order.PcBuyCount,order.PcStatus,order.PcRecordId)">
				<view class="card-header">
					<text class="order-no">订单号：{{ order.PcRegNo }}</text>
					<u-tag :text="getStatusText(order.PcStatus)" :type="getStatusType(order.PcStatus)" size="mini"
						plain></u-tag>
				</view>

				<!-- 商品列表 -->
				<view class="goods-list">
					<view class="goods-item">
						<image class="goods-img" :src="order.PcTestImage"></image>
						<view class="goods-info">
							<text class="goods-name">{{ order.PcTestName }}</text>
							<text class="goods-spec" v-if="order.spec">{{ order.spec }}</text>
							<text class="goods-price">￥{{ order.PcAmount }}</text>
						</view>
						<text class="goods-quantity">x{{ order.PcBuyCount }}</text>
					</view>
				</view>

				<!-- 订单信息 -->
				<view class="order-info">
					<text class="order-time">{{ formatTime(order.PcCreateDatetime) }}</text>
					<text class="total-amount">实付：￥{{ order.PcAllPrice }}</text>
				</view>

				<!-- 操作按钮 -->
				<view class="action-btns">
					<template v-if="order.status === 'pending'">
						<u-button type="error" size="mini" plain @click="cancelOrder(order)">取消订单</u-button>
						<u-button type="primary" size="mini" @click="payOrder(order)">立即支付</u-button>
					</template>

					<template v-if="order.status === 'completed'">
						<u-button type="info" size="mini" plain @click="rebuyOrder(order)">再次购买</u-button>
					</template>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				PcStatus: '',
				current:0,
				currentTab: 0,
				tabList: [{
						name: '未支付'
					},
					{
						name: '已支付'
					},
					{
						name: '已核销'
					},
					{
						name: '已退款'
					}
				],

				// 完整订单数据
				orders: [{
						orderNo: '202311150001',
						createTime: '2023-11-15 12:30:45',
						totalAmount: 68.50,
						status: '1', // pending/canceled/completed
						items: [{
							image: '/static/foods/burger.png',
							name: '巨无霸套餐',
							spec: '中薯+可乐',
							price: 38.00,
							quantity: 1
						}]
					},

					{
						orderNo: '202311140002',
						createTime: '2023-11-14 18:15:20',
						totalAmount: 45.00,
						status: '2',
						items: [{
							image: '/static/foods/chicken.png',
							name: '香辣鸡翅',
							price: 25.00,
							quantity: 2
						}]
					},
					{
						orderNo: '202311130003',
						createTime: '2023-11-13 11:28:03',
						totalAmount: 98.00,
						status: '3',
						items: [{
							image: '/static/foods/combo.png',
							name: '家庭套餐',
							spec: '3-4人份',
							price: 98.00,
							quantity: 1
						}]
					},
					{
						orderNo: '202311120004',
						createTime: '2023-11-12 09:45:12',
						totalAmount: 22.50,
						status: '3',
						items: [{
								image: '/static/foods/coffee.png',
								name: '拿铁咖啡',
								spec: '大杯',
								price: 15.00,
								quantity: 1
							}

						]
					},
					{
						orderNo: '202311130003',
						createTime: '2023-11-13 11:28:03',
						totalAmount: 98.00,
						status: '-1',
						items: [{
							image: '/static/foods/combo.png',
							name: '家庭套餐',
							spec: '3-4人份',
							price: 98.00,
							quantity: 1
						}]
					},
					{
						orderNo: '202311120004',
						createTime: '2023-11-12 09:45:12',
						totalAmount: 22.50,
						status: '3',
						items: [{
								image: '/static/foods/coffee.png',
								name: '拿铁咖啡',
								spec: '大杯',
								price: 15.00,
								quantity: 1
							}

						]
					},
				]
			}
		},
		onLoad(option) {
			
			this.current=option.current
			if(this.current==undefined)
			{
				this.current=0
				
			}
			this.switchTab(this.current)
		
		},
		// computed: {
		// 	filteredOrders() {
		// 		const statusMap = ['1', '2', '3', '-1']
				
		// 		console.log(statusMap[this.currentTab],this.orders.filter(
					
		// 			order => order.PcStatus === statusMap[this.currentTab]
		// 		))
				
		// 		return this.orders.filter(
				
		// 			order => order.PcStatus === statusMap[this.currentTab]
		// 		)
		// 	}
		// },
		
		methods: {
			tiaozhuan(temp1,temp2,temp3,temp4,temp5,temp6,temp7,temp8){
				console.log(temp8)
				uni.navigateTo({
					url: `/pages/canteen/canteenListDetail?PcRegNo=${temp1}&PcTestName=${temp2}&PcCreateDatetime=${temp3}&PcAmount=${temp4}&PcAllPrice=${temp5}&PcBuyCount=${temp6}&PcStatus=${temp7}&PcRecordId=${temp8}`
				
				})
			},
			getdclist() {
				this.$request("Package", "GetPackageRecord", {
					PcStatus: this.currentTab
				}).then(res => {

					if (res.code == 1) {

						this.orders = res.data
						console.log(this.orders)
						//this.changes(this.current)
					}
				})	
			},
			// 切换选项卡
			switchTab(index) {
			  this.current = index
				if(index==0) this.currentTab =1
				if(index==1) this.currentTab =2
				if(index==2) this.currentTab =3
				if(index==3) this.currentTab =-1
				this.getdclist()
				
			},

			// 状态显示
			getStatusText(status) {
				const map = {
					'1': '未支付',
					'2': '已支付',
					'3': '已核销',
					'-1': '已退款',
				}
				return map[status] || ''
			},

			// 状态样式
			getStatusType(status) {
				const map = {
					"1": 'warning',
					'2': 'error',
					'3': 'success',
					'-1': 'error',
				}
				return map[status] || 'info'
			},

			// 时间格式化
			formatTime(time) {
				return this.$u.timeFormat(time, 'yyyy-mm-dd hh:MM:ss')
			},

			// 取消订单
			cancelOrder(order) {+
				uni.showModal({
					title: '确认取消',
					content: '确定要取消该订单吗？',
					success: res => {
						if (res.confirm) {
							order.status = 'canceled'
							uni.$u.toast('订单已取消')
						}
					}
				})
			},

			// 支付订单
			payOrder(order) {
				uni.navigateTo({
					
					url: `/pages/order/pay?orderNo=${order.orderNo}`
				})
			},

			// 再次购买
			rebuyOrder(order) {
				uni.$u.toast('已加入购物车')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background: #f5f7fa;
		min-height: 100vh;
	}

	.order-list {
		padding-top: 20rpx;
		height: calc(100vh - 100rpx);
	}

	.order-card {

		background: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		padding: 24rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-bottom: 20rpx;
			margin-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;

			.order-no {
				font-size: 26rpx;
				color: #666;
			}
		}

		.goods-item {
			display: flex;
			align-items: center;
			padding: 20rpx 0;
			border-bottom: 1rpx dashed #eee;

			&:last-child {
				border-bottom: none;
			}

			.goods-img {
				width: 120rpx;
				height: 120rpx;
				border-radius: 8rpx;
				margin-right: 20rpx;
			}

			.goods-info {
				flex: 1;

				.goods-name {
					font-size: 28rpx;
					color: #303133;
				}

				.goods-spec {
					font-size: 24rpx;
					color: #909399;
					margin: 8rpx 0;
				}

				.goods-price {
					font-size: 26rpx;
					color: #f56c6c;
				}
			}

			.goods-quantity {
				font-size: 26rpx;
				color: #909399;
			}
		}

		.order-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			padding-top: 20rpx;
			border-top: 1rpx solid #eee;

			.order-time {
				font-size: 24rpx;
				color: #909399;
			}

			.total-amount {
				font-size: 28rpx;
				color: #f56c6c;
				font-weight: bold;
			}
		}

		.action-btns {
			display: flex;
			justify-content: flex-end;
			gap: 20rpx;
			margin-top: 20rpx;
		}
	}
</style>